<form id="<?php echo $uniqid;?>">
  <div id="platformprofitManage" class="easyui-panel" title="平台收益明细管理">
    <div class="datagrid-toolbar" style="padding:5px;border-bottom:#eee 1px solid;">
      <table cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
          <td colspan="3" style="padding-bottom: 3px;">
            <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                    class="l-btn-text">重载</span></span></a>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
                  @click="filter('all')"><span class="l-btn-text">全部</span></span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='paid'?'selected':''"
                  @click="filter('paid')"><span class="l-btn-text">已支付</span></span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='finished'?'selected':''"
                  @click="filter('finished')"><span class="l-btn-text">已完成</span></span>
          </td>
        </tr>
        <tr>
          <td><span style="line-height:30px;">订单日期</span>
            <input id="platformprofitStartOn" v-model="params.start_on" style="width:110px" type="text"
                   class="easyui-datebox"> </input>至
            <input id="platformprofitEndOn" v-model="params.end_on" style="width:110px" type="text"
                   class="easyui-datebox"> </input>
          </td>
          <td>&nbsp;<select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" style="width:80px">
            <option value="order_id">订单ID</option>
            <option value="order_sn">订单编号</option>
            <option value="user_id">会员ID</option>
            <option value="user_phone">会员手机号</option>
            <option value="customer_id">代客下单ID</option>
            <option value="goods_id">商品ID</option>
            <option value="goods_name">商品名称</option>
          </select>&nbsp;<input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init"
                                class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                type="text"> </input>
          </td>
          <td><a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                  class="l-btn-text">查询</span></span></a>
              <a href="javascript:void(0);" @click="exportExcel" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                    class="l-btn-text">导出平台收益</span></span></a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="con"
         style="-moz-user-select:none;overflow: hidden;padding-bottom: 50px;">
      <table class="datagrid-htable" border="0" cellspacing="0" cellpadding="0"
             style="width: 100%;border: #ccc 0 solid;border-collapse:collapse;">
        <thead>
        <tr class="datagrid-header-row" style="background-color: #f9f9f9">
          <td width="30%" style="padding:0; border-bottom:#eee 1px solid;" align="center">商品信息</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">实付金额</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">成本价</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">代理分红</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">股东分红</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">区域经销商分红</td>
          <td width="10%" style="border-bottom:#eee 1px solid;" align="center">推客分佣</td>
          <td width="10%" style="border-bottom:#eee 1px solid; padding: 5px;" align="center">平台利润</td>
        </thead>
        <tbody>
        <template v-for="(value,index) in dataset">
          <tr class="datagrid-header-row" style="border-top: 2px solid #c0c0c0;">
            <td colspan="8" style="background: #f9f9f9;">
              <div style="display: flex; justify-content: space-between;">
                <div style="height: 36px;padding-left:10px;line-height: 36px;">
                  ID：{{ value.id }} ，
                  订单号：{{ value.order_sn }} ，
                  下单时间：{{ value.created_at }}
                </div>
                <div style="text-align: right;padding-right: 30px; height: 36px;line-height: 36px;">
                  支付金额：<span style="color: #d51313">{{value.pay_fee}}元</span> - 支付方式：<span style="color: #0b6bc2">{{value.pay_type | payType}}</span> - 支付时间：<span style="color: #ee650c">{{ value.paytime_text }}</span>
                </div>
              </div>
            </td>
          </tr>
          <template v-for="(item, item_key) in value.order_items">
            <tr :style="item_key == 0?'':'border-top: 1px dashed #e1e1e1;'">
              <td width="30%" style="padding: 5px 0;">
                <div style="display: flex;align-items:center;justify-content: left;">
                  <div style="text-align: center; overflow:hidden; padding-left: 20px; width: 60px; height: 60px;">
                    <img :src="item.goods_image" width="100%" height="100%"/>
                  </div>
                  <div style="line-height: 24px; padding: 2px; margin-left: 10px;">
                    <p>{{item.goods_title}} </p>
                    <p>商品ID：{{item.goods_id}} , 单价：{{item.goods_price}}元 数量：{{item.goods_num}}
                      规格：{{item.goods_sku_text}}</p>
                  </div>
                </div>
              </td>
              <td width="10%" style="text-align: center;">
                {{item.pay_price}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.cost_price}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.agentreward_sum_commission}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.gudongfenhong_sum_commission}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.qudaireward_sum_commission}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.tuikereward_sum_commission}}元
              </td>
              <td width="10%" style="text-align: center;">
                {{item.platform_profit}}元
              </td>
            </tr>
          </template>
        </template>
        </tbody>
      </table>
      <div class="datagrid-pager pagination"
           style="width: 100%;position: fixed;bottom: 0px; background-color: #f1f1f1;padding-top:5px;border-top:#ccc 1px solid;display: flex;">
        <table cellspacing="0" cellpadding="0" border="0">
          <tbody>
          <tr>
            <td><select v-model="params.rows" class="pagination-page-list" @change="page_rows_change">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select></td>
            <td>
              <div class="pagination-btn-separator"></div>
            </td>
            <td>
              <template v-if="params.page==1">
                <a href="javascript:;" @click="first"
                   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
                ><span class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-first">&nbsp;</span></span></a>
              </template>
              <template v-else>
                <a href="javascript:;" @click="first"
                   class="l-btn l-btn-small l-btn-plain"
                ><span class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-first">&nbsp;</span></span></a>
              </template>
            </td>
            <td>
              <template v-if="params.page==1">
                <a href="javascript:;" @click="pre"
                   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
                ><span class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
              </template>
              <template v-else>
                <a href="javascript:;" @click="pre"
                   class="l-btn l-btn-small l-btn-plain"
                ><span class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
              </template>
            </td>
            <td>
              <div class="pagination-btn-separator"></div>
            </td>
            <td><span style="padding-left:6px;">第</span></td>
            <td><input class="pagination-num" type="text" v-model="params.page" size="2"></td>
            <td><span style="padding-right:6px;">共{{totalPage}}页</span></td>
            <td>
              <div class="pagination-btn-separator"></div>
            </td>
            <td>
              <template v-if="params.page==totalPage">
                <a href="javascript:;" @click="next"
                   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
                        class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-next">&nbsp;</span></span></a>
              </template>
              <template v-else>
                <a href="javascript:;" @click="next" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-next">&nbsp;</span></span></a>
              </template>
            </td>
            <td>
              <template v-if="params.page==totalPage">
                <a href="javascript:;" @click="last"
                   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
                        class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-last">&nbsp;</span></span></a>
              </template>
              <template v-else>
                <a href="javascript:;" @click="last" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><span
                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                        class="l-btn-icon pagination-last">&nbsp;</span></span></a>
              </template>
            </td>
            <td>
              <div class="pagination-btn-separator"></div>
            </td>
            <td><a href="javascript:;" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><span
                    class="l-btn-text l-btn-empty">&nbsp;</span><span
                    class="l-btn-icon pagination-load">&nbsp;</span></span></a></td>
          </tr>
          </tbody>
        </table>
        <div class="pagination-info">显示{{(params.page-1) * params.rows + 1}}到{{params.page * params.rows}},共{{total}}记录</div>
      </div>
    </div>
  </div>
</form>
<div id="platformprofitdeliverydlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
  var platformprofitVm = new Vue({
    el: '#<?php echo $uniqid;?>',
    data: {
      dataset: [],
      params: {
        sort: 'created_at',
        order: 'desc',
        rows: 10,
        page: 1,
        start_on: '',
        end_on: '',
        keywords: '',
        keywordsType:'order_id',
        mode: 'all'
      },
      total: 0,
      totalPage: 0,
    },
    filters: {
      payType(value){
        switch (value) {
          case 'wechat':
            return '微信支付';
          case 'alipay':
            return '支付宝';
          case 'wallet':
            return '钱包支付';
          case 'score':
            return '积分支付';
          case 'JoinPay-wx':
            return '汇聚支付-微信';
          case 'JoinPay-ali':
            return '汇聚支付-支付宝';
          case 'pickgoods':
            return '提货卡';
          default:
            return '未支付';
        }
      },
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        $('#<?php echo $uniqid;?> #platformprofitStartOn').datebox('setValue', this.params.start_on);
        $('#<?php echo $uniqid;?> #platformprofitEndOn').datebox('setValue', this.params.end_on);
        this.init();
      }, 200);
    },
    methods: {
      init: function () {
        $('#<?php echo $uniqid;?> .pagination').width($(window).width() - $("#leftMenu").width() - 30);
        showLoading('#<?php echo $uniqid;?>');
        this.params.start_on = $('#<?php echo $uniqid;?> #platformprofitStartOn').datebox('getValue');
        this.params.end_on = $('#<?php echo $uniqid;?> #platformprofitEndOn').datebox('getValue');
        $.post('/admin/platformprofit/index', this.params, (data) => {
          hideLoading();
          this.dataset = data.rows;
          this.total = data.total;
          this.totalPage = Math.ceil(data.total / this.params.rows);
        }, 'json');
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      page_rows_change: function () {
        platformprofitVm.params.page = 1;
        platformprofitVm.init();
      },
      first: function () {
        platformprofitVm.params.page = 1;
        platformprofitVm.init();
      },
      pre: function () {
        if (platformprofitVm.params.page > 1) {
          platformprofitVm.params.page--;
          platformprofitVm.init();
        }
      },
      next: function () {
        if (platformprofitVm.params.page < platformprofitVm.totalPage) {
          platformprofitVm.params.page++;
          platformprofitVm.init();
        }
      },
      last: function () {
        platformprofitVm.params.page = platformprofitVm.totalPage;
        platformprofitVm.init();
      },
      platformprofitreload: function () {
        $("#platformprofit").datagrid('reload');
      },
      exportExcel(){
        showLoading('.con');
        this.params.start_on = $('#<?php echo $uniqid;?> #platformprofitStartOn').datetimebox('getValue');
        this.params.end_on = $('#<?php echo $uniqid;?> #platformprofitEndOn').datetimebox('getValue');
        $.post('/admin/platformprofit/export', {
          keywordsType: this.params.keywordsType,
          keywords: this.params.keywords,
          start_on: this.params.start_on,
          end_on: this.params.end_on,
          mode: this.params.mode,
        }, function (data) {
          hideLoading();
          if (parseInt(data.ret) === 0) {
            $.messager.show({
              title: '提示',
              msg: data.msg,
              timeout: 3000,
              showType: 'slide'
            });
            eventmaterialDownload(data.data);
          } else {
            $.messager.alert('提示', data.msg, 'warning');
          }
        }, 'json').fail((response)=> {
          hideLoading();
          $.messager.alert('提示', response.responseText, 'warning');
        });
      },

    }
  });

  document.addEventListener('onResize', (e) => {
    let height = $(window).height() - $(".top").height() - 46;
    $('#platformprofitManage').panel('resize', {width: 'auto', height: 'auto'});
  });
</script>

<style>
  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }
  .platformprofit-item-rows {
    padding: 4px;
    display: flex;
    min-height: 90px;
    justify-content: space-between;
    align-items: center;
    border-bottom: #eee 1px solid;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }


</style>
